import React, { useState } from 'react'
import {
  Switch,
  Route,
  Redirect
} from 'react-router-dom'
import { Home } from './home'
import Category from './category/Category'
import Chat from './chat/Chat'
import My from './my/My'

import TabBar from '@/components/tabbar/TabBar'
import TabBarItem from '@/components/tabbar/TabBarItem'

import home from '@/assets/images/home.png'
import home_fill from '@/assets/images/home_fill.png'

import { 
  HomeWrapper,
  MainWrapper
} from './styledIndex'

const categoryMenu = <svg t="1629967838131" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6066" width="25" height="25" fill="#666666"><path d="M768 131.2 259.2 131.2c-54.4 0-96 41.6-96 96L163.2 864c0 54.4 41.6 96 96 96 6.4 0 12.8-3.2 16-3.2l236.8-147.2 240 147.2c6.4 3.2 9.6 3.2 16 3.2 54.4 0 96-41.6 96-96L864 227.2C864 172.8 822.4 131.2 768 131.2zM800 864c0 16-9.6 28.8-25.6 32l-246.4-150.4c-6.4-3.2-9.6-3.2-16-3.2-6.4 0-12.8 0-16 3.2l-243.2 150.4c-12.8-3.2-25.6-16-25.6-32L227.2 227.2c0-19.2 12.8-32 32-32L768 195.2c19.2 0 32 12.8 32 32L800 864z" p-id="6067"></path><path d="M672 320 352 320c-19.2 0-32 12.8-32 32s12.8 32 32 32l320 0c19.2 0 32-12.8 32-32S691.2 320 672 320z" p-id="6068"></path><path d="M672 448 352 448c-19.2 0-32 12.8-32 32s12.8 32 32 32l320 0c19.2 0 32-12.8 32-32S691.2 448 672 448z" p-id="6069"></path><path d="M672 576 352 576c-19.2 0-32 12.8-32 32s12.8 32 32 32l320 0c19.2 0 32-12.8 32-32S691.2 576 672 576z" p-id="6070"></path></svg>

const categoryFillMenu = <svg t="1629967922442" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6208" width="25" height="25"><path d="M768 131.2 259.2 131.2c-54.4 0-96 41.6-96 96L163.2 864c0 54.4 41.6 96 96 96 6.4 0 12.8-3.2 16-3.2l236.8-147.2 240 147.2c6.4 3.2 9.6 3.2 16 3.2 54.4 0 96-41.6 96-96L864 227.2C864 172.8 822.4 131.2 768 131.2zM672 640 352 640c-19.2 0-32-12.8-32-32s12.8-32 32-32l320 0c19.2 0 32 12.8 32 32S691.2 640 672 640zM672 512 352 512c-19.2 0-32-12.8-32-32s12.8-32 32-32l320 0c19.2 0 32 12.8 32 32S691.2 512 672 512zM672 384 352 384c-19.2 0-32-12.8-32-32s12.8-32 32-32l320 0c19.2 0 32 12.8 32 32S691.2 384 672 384z" p-id="6209"></path></svg>

const my = ''

const myFill = ''


export default function Index() {
  const [selectedIndex, setSelectedIndex] = useState('home')

  return (
    <HomeWrapper>
      <MainWrapper>
        <Switch>
          <Route path="/index/home">
            <Home></Home>
          </Route>
          <Route path="/index/category">
            <Category></Category>
          </Route>
          <Route path="/index/chat">
            <Chat></Chat>
          </Route>
          <Route path="/index/my">
            <My></My>
          </Route>
          <Redirect from='/index' to="/index/home"></Redirect>
        </Switch>
      </MainWrapper>
      <TabBar
        fixed={true}
        activeColor={'#000'}
        inactiveColor={'#666'}
        selectedIndex={selectedIndex}
        setSelectedIndex={setSelectedIndex}
        border={true}
        route={true}
      >
        <TabBarItem
          name="home"
          icon={<img alt="" src={home}/>}
          activeIcon={<img alt="" src={home_fill} />}
          to="/index/home"
        >首页</TabBarItem>
        <TabBarItem
          name="category"
          icon={categoryMenu}
          activeIcon={categoryFillMenu}
          to="/index/category"
        >分类</TabBarItem>
        <TabBarItem
          name="chat"
          icon={<i>&#xe731;</i>}
          activeIcon={<i className="active">&#xe730;</i>}
          to="/index/chat"
        >信息</TabBarItem>
        <TabBarItem
          name="my"
          icon={<img alt="" src={my} />}
          activeIcon={<img alt="" src={myFill} />}
          to="/index/my"
        >我的</TabBarItem>
      </TabBar>
    </HomeWrapper>
  )
}
